const info = {
    name: 'xxxx 手机',
    price: 100,
    desc: '详细的描述信息',
    types: [ '16G', '8G', '4G' ],
    storages: [ '128G', '256G' ],
    colors: [ '远峰蓝', '深空灰', '土豪金' ],
    list: [
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg'
      },
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/203027/29/18673/111714/61b8a3f2E8eb0064f/66011b25428e5834.jpg'
      },
      {
        show: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg',
        item: 'https://img13.360buyimg.com/n5/s54x54_jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg',
        enlarge: 'https://img13.360buyimg.com//n0/jfs/t1/139813/6/23454/72371/61b8a3f2E515528ae/26f8d4f510c7546d.jpg'
      }
    ]
  }

  // 属性  
  //    ele 范围元素 最大的盒子 
  //    mask 遮罩层 
  //    show 中图层 
  //    enlarge 放大图层 
  //    list 小图列表
  //    mask尺寸  遮罩层的尺寸
  //    bg尺寸  最大图的尺寸
  //    show的尺寸 展示中图的尺寸
  //    enlarge放大图层盒子的尺寸 



  // 方法
  //    渲染页面
  //    移入移出
  //        移入 遮罩层显示   放大图层显示 
  //        移出 遮罩层隐藏   放大图层隐藏
  //    列表切换 
 //         小图切换 中图跟着动  
//      移动联动 
//          遮罩层在中图上动  enlarge在最大图上动  

class Enlarge{
    constructor(selector){
        this.ele = document.querySelector(selector);
        this.mask = this.ele.querySelector('.mask');
        this.show = this.ele.querySelector('.show');
        this.list = this.ele.querySelector('.list');
        this.enlarge = this.ele.querySelector('.enlarge');

        this.bindHTML();
        // 获取遮罩层的尺寸 
        // 外链设置的mask尺寸 
        this.mask_width = parseInt(window.getComputedStyle(this.mask).width);
        this.mask_height = parseInt(window.getComputedStyle(this.mask).height);

        // show的尺寸  
        this.show_width = this.show.clientWidth;
        this.show_height= this.show.clientHeight;


        // 超大图的尺寸  
        // 页面渲染过来以后再获取 
        this.big_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width);

        this.big_height= parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height);


        // 放大图层盒子的尺寸   以实际为准 
        this.enlarge_width = 0;
        this.enlarge_height = 0;



        // this.handleScale();
        this.overOut();
        this.listChange();
        this.move()
    }


    // 渲染数据 
    bindHTML(){
        // 因为布局没有img标签  需要手动创建 
        // 增加src属性  

        // 中图需要img标签  小图需要  大图也需要
        //创建一套 其它克隆 
        const imgele = document.createElement('img'); // 母版 

        // show 
        const show_img = imgele.cloneNode(true);
        show_img.src = info.list[0].show;
        this.show.insertBefore(show_img,this.mask);



        // enlarge
        const enlarge_img = imgele.cloneNode(true);
        enlarge_img.src = info.list[0].enlarge;
        this.enlarge.appendChild(enlarge_img);


        // ul的

        info.list.forEach((item,index)=>{
            const li = document.createElement('li');
            const li_img = imgele.cloneNode(true);
            li_img.src = item.item;
            li.appendChild(li_img);

            li.dataset.show = item.show;
            li.dataset.enlarge = item.enlarge;

            if(index ===0){
                li.classList.add('active')
            }



            this.list.appendChild(li);
        });


    }


    //移入移出 
    overOut(){
        this.show.addEventListener('mouseover',()=>{
            this.mask.style.display = 'block';
            this.enlarge.style.display = 'block';

        });
        this.show.addEventListener('mouseout',()=>{
            this.mask.style.display = 'none';
            this.enlarge.style.display = 'none';
        });

    }


    // 点击切换 
    listChange(){
        this.list.addEventListener('click',e=>{
            if(e.target.nodeName == 'LI'){ // ul有很多子元素 li img 
                // 确保拿到的是li 
                for(let i=0;i<this.list.children.length;i++){
                    this.list.children[i].classList.remove('active')
                }
                e.target.classList.add('active')

            }
            // 拿到事件目标上的属性   show 中图地址  enlarge 长图地址 
            // console.log(e.target.dataset.show);
            // console.log(e.target.dataset.enlarge);

            this.show.firstElementChild.src = e.target.dataset.show;
            this.enlarge.firstElementChild.src = e.target.dataset.enlarge;

        });
    }

    // 调整比例 
    handleScale(){
        /* show的尺寸       最大图的尺寸
        ----------- =  --------------
        遮罩层的尺寸      enlarge盒子的尺寸 

        10         25
        ---   =  ------
        2          5 */

        // enlarge盒子的尺寸 =   最大图的尺寸 * 遮罩层的尺寸  / show的尺寸
        this.enlarge_width =  this.big_width * this.mask_width / this.show_width;
        this.enlarge_height = this.big_height * this.mask_height / this.show_height;
    
        this.enlarge.style.width =   this.enlarge_width + 'px';
        this.enlarge.style.height =   this.enlarge_height + 'px';

    
    }


    // 联动  
    move(){
        // 给this.show 绑定鼠标移动事件 
        
        // 不能越界   
        this.show.addEventListener('mousemove',e=>{
            // 获取鼠标实时坐标 
            let x = e.offsetX - this.mask_width / 2;
            let y = e.offsetY - this.mask_height / 2;

            // 防止越界
            if(x<=0)x=0;
            if(y<=0)y=0;
            if(x>=this.show_width-this.mask_width) x=this.show_width-this.mask_width;
            if(y>=this.show_height-this.mask_height) y=this.show_height-this.mask_height;



            // 遮罩层跟着鼠标走 
            this.mask.style.left = x + 'px';
            this.mask.style.top = y + 'px';

            // 遮罩层在show里边移动  enlarge 在大图上移动  

            // 遮罩层mask移动距离              mask尺寸
            // ----------------       =   --------------------
            // enlarge在大图上的移动距离       show的尺寸


            // enlarge在大图上的移动距离 = 遮罩层mask移动距离 * show 的尺寸  / mask的尺寸 

            // enlarge 在大图上 也跟着动 
            
            // 遮罩层移动方向 跟enlarge移动方向应该相反  
            this.enlarge.firstElementChild.style.left = -x * this.show_width / this.mask_width + 'px';
            this.enlarge.firstElementChild.style.top = -y * this.show_height / this.mask_height+ 'px';


        })


      
    }

}